<template>
	<view class="home">
		<u-sticky>
			<view class="nava_box">
				<view class="" @click="returnPageFn">
					<u-icon name="arrow-left" color="#4d4d4d" size="26"></u-icon>
				</view>
				<view class="">
					{{name}}
				</view>
				<view class="shangc" hover-class="avshangc" @click="uploadRainfallFn">
					<uni-icons type="cloud-upload" size="30" color="#ffffff"></uni-icons>
					<view class="">
						上报雨量
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="" style="height: 20rpx;">

		</view>
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption">
			<u-swipe-action>
				<u-swipe-action-item :name="i.id" :autoClose="true" :options="options1" v-for="(i,index) in dataList"
					:key="index" @click="deldevFn($event,i)">
					<view class="devitem">
						<view class="devitem_flx">
							<view class="flx_dev">
								<view class="flx_a">
									{{i.informant}}
								</view>
								<view class="timeye">
									{{i.date}}
								</view>
								<view class="nubtiti">
									<view class="">
										{{i.rainFall}}
									</view>
									<view class="" style="color: #666;font-size: 35rpx;margin-left: 10rpx;">
										mm
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</mescroll-body>
		<!-- 删除弹窗 -->
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="删除" title="警告" content="是否删除这条记录，删除后不可恢复!"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				options1: [{
					text: '修改',
					style: {
						color: '#000',
						backgroundColor: '#ffd501',
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#ff6769',
					}
				}],
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				titleStyle: {
					color: '#000000',
					fontSize: '40rpx'
				},
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [],
				relativenNum: '', //相对时间
				rsId: null,
				name: '',
				todayRainfall: '', //
				deleID: null //删除id
			}
		},
		onLoad(option) {
			this.rsId = option.id
			this.name = option.name
			this.dateTime = option.date
			this.todayRainfall = option.todayRainfall

			console.log('rsId', this.rsId);
		},
		onShow() {
			setTimeout(() => {
				this.reloadList()
			}, 300)
		},
		methods: {
			// 上传雨量
			uploadRainfallFn() {
				let type = 1
				uni.navigateTo({
					url: '/pages/index/artificialRainfall?id=' + this.rsId + '&name=' + this.name +
						'&todayRainfall=' + this.todayRainfall + '&type=' + type
				});
			},
			// 返回
			returnPageFn() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 人工测报
			devitFn(id) {
				uni.navigateTo({
					url: '/pages/index/manualReportingDetails?id=' + id
					// url: '/pages/index/setUp'
				});
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/api/device/device/rainfallStationDataList', {
					params: {
						"pageSize": pageSize,
						"pageNum": pageNum,
						// "date": this.dateTime,
						"rsId": this.rsId * 1
					}
				}).then(res => {
					if (res.code == 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.total;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = res.total;
						// 接口返回的是否有下一页 (true/false)

						//设置列表数据

						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据

						console.log('雨量站统计列表', this.dataList);

						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize);
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 相对时间
			relativeTime(date) {
				const dateToCheck = dayjs(date.TIM);
				// 获取今天的日期
				const today = dayjs().format('YYYY-MM-DD HH:mm');
				// 计算dateToCheck距离今天的天数差异
				const daysDifference = dateToCheck.diff(today, 'day');
				// 如果你想要一个绝对值（不考虑正负），可以使用Math.abs
				const absoluteDaysDifference = Math.abs(daysDifference);
				return absoluteDaysDifference
			},
			// 删除列表
			deldevFn(e, i) {
				console.log('e', e, i);
				this.deleID = e.name
				let type = 0
				// 修改
				if (e.index == 0) {
					uni.navigateTo({
						url: '/pages/index/artificialRainfall?id=' + this.rsId + '&name=' + this.name +
							'&todayRainfall=' + i.rainFall + '&type=' + type + '&meaTime=' + i.date +
							'&informant=' + i.informant
					});
				}
				// 删除
				if (e.index == 1) {
					this.$refs.alertDialog.open()
				}
			},
			dialogConfirm() {
				console.log('1111');
				this.delListFn(this.deleID)
			},
			dialogClose() {
				console.log('3333');
			},
			delListFn(e) {
				console.log('e', e);
					uni.$u.http.delete('/api/device/device/removeRainfallStationData/' + e).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功',
								duration: 1000
							});
							uni.navigateBack({
								delta: 1
							});
						}
					}).catch(err => {
						console.log('错误', err);
					})

			},
			// 电量
			electricFn(data) {
				let nub = (data - 8) / (12 - 8) * 100
				return nub.toFixed(0)
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		.nava_box {
			padding: 80rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: rgba(242, 241, 246, 0.3);
			backdrop-filter: blur(20rpx);

			/* 应用磨砂效果 */
			.shangc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 25rpx;
				background-color: #597caa;
				color: #fff;
				border-radius: 50rpx;
				font-size: 40rpx;
			}

			.avshangc {
				background-color: #00aaff;
			}
		}

		.devitem {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// flex-wrap: wrap;
			// padding: 30rpx;
			// border-radius: 30rpx;
			border-bottom: #e7e7e7 solid 1rpx;

			.devitem_flx {
				margin: 20rpx;
				padding: 10rpx;
				border-radius: 30rpx;

				.flx_dev {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.flx_a {
						display: flex;
						flex: 1;
						color: #000000;
					}

					.timeye {
						display: flex;
						flex: 1;
						color: #757575;
					}

					.nubtiti {
						flex: 1;
						display: flex;
						align-items: flex-end;
						justify-content: right;
						font-size: 50rpx;
						color: #2979ff;
					}
				}

			}

		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		/* background-color: #f2f1f6; */
	}
</style>